<template>
  <div class="AdverseReactions">
    <van-nav-bar title="不良反应" left-text="" left-arrow @click-left="$router.push('/frontPage')"/>
    <van-checkbox-group v-model="result">
      <van-cell-group>
        <van-cell
            v-for="(item, index) in list"
            clickable
            :key="item.badreact_id"
            :title="`${item.badreact_symptom}`"
            @click="toggle(index)"
        >
          <template #right-icon>
            <van-checkbox :name="item" ref="checkboxes" shape="square" icon-size="15px"/>
          </template>
        </van-cell>
      </van-cell-group>
    </van-checkbox-group>
    <div class="submitBtn">
      <van-button type="info" size="small" block @click="badReactBtn">提交</van-button>
    </div>
  </div>
</template>

<script>
import {Toast} from "vant";
import {mapGetters} from "vuex";

export default {
  name: "AdverseReactions",
  computed:{
    ...mapGetters(['userPhone'])
  },
  data() {
    return {
      list: [],
      result: [],
      arr: [],
    }
  },
  mounted() {
    this.getBadReactList();
  },
  methods: {
    //获取所有不良反应
    getBadReactList() {
      this.$service.frontPageService.badReactList().then(res => {
        console.log('不良反应=' + res);
        this.list = res.data.data;
      })
    },
    toggle(index) {
      this.$refs.checkboxes[index].toggle();
      for (let i = 0; i < this.arr.length; i++) {
        if (this.arr[i] == index) {
          this.arr.splice(i, 1);
          return;
        }
      }
      this.arr.push(index);
    },
    //不良反应
    badReactBtn() {
      let badReactList1 = this.arr.join(',')
      this.$service.frontPageService.insertBadReact(this.userPhone,badReactList1).then(res => {
        if (res.data.code == 201) {
          Toast(res.data.msg);
        } else if (res.data.code == 200) {
          Toast(res.data.msg);
        }
      })
      this.$router.push('/frontPage')
    }
  },
}
</script>

<style scoped lang="less">
.submitBtn {
  margin: 30px auto;
  display: flex;
  justify-content: center;
  width: 30%;

  .van-button {
    border-radius: 5px;
  }
}
</style>
